<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<!--弹窗：收入导入-->
<div th:fragment="budgetincomeImport" class="modal inmodal fade" id="budgetincomeImport_Modal"
     tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="budgetincomeImport_modalTitle">收入导入</h4>
                <p id="budgetincomeImport_modalDesc" class="font-bold text-danger"></p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="ibox ">
                            <div class="ibox-content">

                                <div id="wizard">
                                    <h1>上传待导入文件</h1>
                                    <section>
                                        <form action="#" class="dropzone" id="dropzoneForm">
                                            <div class="fallback">
                                                <input name="file" type="file" multiple/>
                                            </div>
                                        </form>

                                        <p class="m-t-xs">
                                        <h3>注意事项：<a class="small" href="http://127.0.0.1:8000/uploadFiles/income_import.xlsx" target="_blank">模板下载</a></h3>
                                        <ol>
                                            <li>仅导入第一个标签页的内容</li>
                                            <li>模板中背景为“黄色”的内容不要修改</li>
                                            <li>模板中字体为“红色”的内容为必填项</li>
                                            <li>金额等必须为数字型</li>
                                        </ol>
                                        </p>
                                    </section>

                                    <h1>处理数据</h1>
                                    <section class="step-content">
                                        <div class="row animated fadeInRight">
                                            <div class="col-6">
                                                <div class="ibox ">
                                                    <div class="ibox-title">
                                                        <h5>未匹配到系统中的部门</h5>
                                                    </div>
                                                    <div class="ibox-content">
                                                        <div class="scroll_content">
                                                            <ol id="inportDetail_dept">

                                                            </ol>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="ibox ">
                                                    <div class="ibox-title">
                                                        <h5>未匹配到系统中的项目</h5>
                                                        <div class="ibox-tools">
                                                            <a href="javascript:void(0)" onclick="saveProjectAll()">
                                                                全部新增
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="ibox-content">
                                                        <div class="scroll_content">
                                                            <ol id="inportDetail_project">

                                                            </ol>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </section>

                                    <h1>导入预算</h1>
                                    <section class="step-content">
                                        <div class="text-center m-t-md">
                                            <form id="importDetail_remarkForm">
                                                <div class="form-group row"><label class="col-lg-2 col-form-label">备注</label>
                                                    <div class="col-lg-10"><textarea id="importDetail_remark" placeholder="请输入备注"
                                                                                     class="form-control"></textarea>
                                                    </div>
                                                </div>
                                            </form>
                                            <button type="button" class="btn btn-w-m btn-default" onclick="saveAll()">导入</button>
                                        </div>
                                    </section>

                                    <!--<h1>上传结果</h1>
                                    <section class="step-content">
                                        <div class="text-center m-t-md">

                                        </div>
                                    </section>-->
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#wizard").steps({
                bodyTag: "section",
                transitionEffect: "fade",
                labels: {
                    cancel: "Cancel",
                    current: "current step:",
                    pagination: "Pagination",
                    finish: "结束",
                    next: "下一步",
                    previous: "上一步",
                    loading: "加载中 ..."
                },
                onStepChanging: function (event, currentIndex, newIndex) {
                    if (newIndex < currentIndex) {
                        return true;
                    }
                    if (currentIndex == 0) {
                        return budgetinfodetailImportObj.uploadSuccess;
                    } else if (currentIndex == 1) {
                        return budgetinfodetailImportObj.deptSuccess && budgetinfodetailImportObj.projectSuccess;
                    } else {

                    }
                },
                onStepChanged: function (event, currentIndex, priorIndex) {
                    if (currentIndex == 0) {
                        $(".budgetUpload").find("iframe").height($(".budgetUpload").find("iframe").contents().height())
                    }
                }
            });
            $("#dropzoneForm").dropzone({
                url: "/budget/tbudgetinfodetail/importDetail",
                paramName: "file", // The name that will be used to transfer the file
                dictDefaultMessage: "<strong>拖动文件到此处或点击上传。</strong>",
                maxFilesize: 2, // MB
                parallelUploads: 1,
                success: function (file, rsp) {
                    if (rsp.code == 0) {
                        budgetincomeImportObj.uploadOver(true, "操作成功")
                    } else {
                        budgetincomeImportObj.uploadOver(false,rsp.msg);
                    }
                }
            });
            /*Dropzone.options.dropzoneForm = {
                url: "/budget/tbudgetinfodetail/importDetail",
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 2, // MB
                parallelUploads: 1,
                dictDefaultMessage: "<strong>拖动文件到此处或点击上传。</strong>",
                success: function (file, rsp) {
                    if (rsp.code == 0) {
                        budgetincomeImportObj.uploadOver(true, "操作成功")
                    } else {
                        budgetincomeImportObj.uploadOver(false,rsp.msg);
                    }
                }
            };*/
            budgetincomeImportObj.myForm.validate({
                rules: budgetincomeImportObj.dataRule,
                submitHandler: function (form) {
                    budgetincomeImportObj.dataFormSubmit(form);
                }
            });
        })
        var budgetincomeImportObj = new Object({
            myForm: $('#budgetincomeImport_Form'),
            myModal: $('#budgetincomeImport_Modal'),
            dataRule: {
                busiType: {
                    required: true,
                    maxlength: 20
                },
                transDate: {
                    required: true
                },
                tradeAmount: {
                    required: true,
                    number: true,
                    min: 0.01,
                    toDecimal2: true
                }
            },
            init: function () {
                this.myModal.modal('show');
            },
            uploadOver(success, msg) {
                if (success) {
                    budgetinfodetailImportObj.uploadSuccess = true;
                    getNoDept();
                    getNoProject();
                    $("#wizard").steps("next");
                } else {
                    swal({
                        title: "操作失败",
                        text: msg,
                        type: "error",
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",
                        closeOnConfirm: false
                    });
                }
            },
            submitHandler: function () {
                budgetincomeImportObj.myForm.submit();
            },
            dataFormSubmit: function (form) {
                let _self = this;
                let formVals = $(form).serializeArray();
                let data = {}
                for (let i = 0; i < formVals.length; i++) {
                    data[formVals[i].name] = formVals[i].value;
                }
                $.myPost({
                    url: `/budget/budgetincome/${data.id ? 'update' : 'save'}`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code == 0) {
                            toastr.success(data.msg, '操作提示')
                            _self.myModal.modal('hide')
                            budgetincomeListObj.refreshDataList();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            }
        })
    </script>

</div>
</body>
</html>